<template>
  <div class="px-20 py-5" id="div-1">
    <a-flex justify="space-between" id="a-flex-1">
      <a-flex gap="5" id="a-flex-1">
        <a-tag class="text-[12px] !px-1 !py-0" color="#DC3E3F" id="a-tag-1">热</a-tag>
        <a-typography-link href="#" id="a-typography-link-1" v-for="(item, index) in list.one" :key="index">
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" id="a-typography-text-1">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
      <a-flex gap="5" id="a-flex-2">
        <SlackSquareOutlined class="text-[#2C589D] pt-[1px]" id="a-icon-1" />
        <a-typography-link href="#" id="`a-typography-link-2`" v-for="(item, index) in list.two" :key="index">
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" id="a-typography-text-2">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
      <a-flex gap="5" id="a-flex-3">
        <SlackSquareOutlined class="text-[#05BAE0] pt-[1px]" id="a-icon-2" />
        <a-typography-link href="#" id="`a-typography-link-3-${index}`" v-for="(item, index) in list.three" :key="index">
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" id="a-typography-text-3">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
      <a-flex gap="5" id="a-flex-4">
        <SlackSquareOutlined class="text-[#0942CA] pt-[1px]" id="a-icon-3" />
        <a-typography-link href="#" id="a-typography-link-4">
          <a-typography-text class="text-[12px] text-[#000] font-bold" id="a-typography-text-4"> 全球进出口数据查询系统 </a-typography-text>
        </a-typography-link>
      </a-flex>
    </a-flex>
    <a-flex gap="15" id="a-flex-5">
      <a-flex justify="space-between" gap="5" class="w-full py-3" id="a-flex-1">
        <a-typography-link href="#" :id="`a-typography-link-5-${index}`" v-for="(item, index) in list1" :key="index">
          <SlackSquareOutlined v-if="index === 0" class="text-[#2C589D] pr-1" :id="`a-icon-4-${index}`" />
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" :id="`a-typography-text-5-${index}`">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
    </a-flex>
    <a-typography-link class="w-full" href="#" id="a-typography-link-6">
      <a-image width="100%" class="!h-[50px]" src="https://picsum.photos/id/1/1000/50" :preview="false" id="a-image-1" />
    </a-typography-link>
    <a-flex justify="space-between" gap="10" class="mt-2" id="a-flex-6">
      <a-typography-paragraph
        v-for="(item, index) in list2"
        :key="index"
        :class="item.style"
        class="flex-1 p-2"
        :id="`a-typography-paragraph-1-${index}`"
      >
        <a-typography-link href="#" class="w-full" :id="`a-typography-link-7-${index}`">
          <a-flex vertical justify="space-between" align="center" :id="`a-flex-7-${index}`" class="h-full">
            <a-typography-text class="text-[14px]" :id="`a-typography-text-6-${index}`">
              {{ item.name }}
            </a-typography-text>
            <a-typography-text class="text-[18px] font-bold" :id="`a-typography-text-7-${index}`">
              {{ item.title }}
            </a-typography-text>
            <a-typography-text class="text-[14px]" :id="`a-typography-text-8-${index}`">
              {{ item.subTitle }}
            </a-typography-text>
            <a-typography-text class="text-[14px]" :id="`a-typography-text-9-${index}`">
              {{ item.time }}
            </a-typography-text>
          </a-flex>
        </a-typography-link>
      </a-typography-paragraph>
    </a-flex>

    <a-flex class="border border-[#ddd] border-solid" id="a-flex-8">
      <a-flex vertical justify="center" class="flex-1 pl-2 pr-5 bg-[#F8F8F8]" id="a-flex-9">
        <a-typography-link href="#" id="a-typography-link-8">
          <a-typography-text class="text-[18px] font-bold line-clamp-1" id="a-typography-text-10"> 01月17日 </a-typography-text>
        </a-typography-link>
        <a-typography-link href="#" id="a-typography-link-9">
          <a-typography-text class="text-[12px] text-[#fff] pl-1 bg-[#000]" id="a-typography-text-11"> 2025 </a-typography-text>
        </a-typography-link>
      </a-flex>

      <a-flex
        align="center"
        justify="center"
        v-for="(item, index) in list3"
        :key="index"
        class="min-h-[100px] flex-1"
        :id="`a-flex-10-${index}`"
      >
        <a-typography-link class="flex flex-col line-clamp-1" :id="`a-typography-link-10-${index}`">
          <a-typography-paragraph :id="`a-typography-paragraph-2-${index}`">
            <a-typography-text :id="`a-typography-text-12-${index}`"> {{ item.name }} </a-typography-text>
            <a-typography-text class="text-[12px] text-[#B3B3B3]" :id="`a-typography-text-13-${index}`"> （元/吨） </a-typography-text>
          </a-typography-paragraph>

          <a-typography-paragraph v-if="item.type === 'up'" class="flex justify-between !mb-0" :id="`a-typography-paragraph-3`">
            <a-typography-text class="text-[red]" :id="`a-typography-text-14-${index}`"> {{ item.one }} </a-typography-text>
            <ArrowUpOutlined class="text-[red]" :id="`a-icon-5-${index}`" />
            <a-typography-text class="text-[red]" :id="`a-typography-text-15-${index}`">
              {{ item.two }}
            </a-typography-text>
          </a-typography-paragraph>

          <a-typography-paragraph v-if="item.type === 'down'" class="flex justify-between !mb-0" :id="`a-typography-paragraph-4-${index}`">
            <a-typography-text class="text-[green]" :id="`a-typography-text-16-${index}`"> {{ item.one }} </a-typography-text>
            <ArrowDownOutlined class="text-[green]" :id="`a-icon-6-${index}`" />
            <a-typography-text class="text-[green]" :id="`a-typography-text-17-${index}`">
              {{ item.two }}
            </a-typography-text>
          </a-typography-paragraph>
        </a-typography-link>
      </a-flex>
    </a-flex>

    <a-row :gutter="10" class="mt-5" id="a-row-1">
      <a-col :span="8" id="a-col-1">
        <a-flex justify="space-between" align="center" class="!mb-2" id="a-flex-11">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-1">大宗商品价格涨跌</a-typography-title>
          <a-typography-text class="text-[12px] text-[#B5BCBE]" id="a-typography-text-18">2025-01-06</a-typography-text>
        </a-flex>
        <a-table bordered :data-source="list4" size="middle" :pagination="false" id="a-table-7">
          <a-table-column key="1" title="产品" data-index="name" id="a-table-column-7"></a-table-column>
          <a-table-column key="2" title="价格" data-index="price" id="a-table-column-7"></a-table-column>
          <a-table-column key="3" title="涨跌额" data-index="down1" id="a-table-column-7">
            <template #default="{ text: tags }">
              <a-typography-text id="a-typography-text-19">
                {{ tags }}<ArrowDownOutlined class="text-[green] pl-1" id="a-icon-7" />
              </a-typography-text>
            </template>
          </a-table-column>
          <a-table-column key="3" title="涨跌幅" data-index="down2" id="a-table-column-7">
            <template #default="{ text: tags }">
              <a-typography-text id="a-typography-text-20">
                {{ tags }}<ArrowDownOutlined class="text-[green] pl-1" id="a-icon-8" />
              </a-typography-text>
            </template>
          </a-table-column>
        </a-table>
      </a-col>
      <a-col :span="8" class="flex justify-between flex-col" id="a-col-2">
        <a-flex vertical id="a-flex-12">
          <a-flex justify="space-between" align="center" class="!mb-2">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-2">百川盈孚视点</a-typography-title>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-11">更多>></a-typography-link>
          </a-flex>
          <a-typography-link class="flex flex-col" id="a-typography-link-12">
            <a-flex vertical justify="space-between" class="bg-[#3867AB] py-3 px-5" id="a-flex-13">
              <a-typography-text class="text-[#fff] line-clamp-2 py-1" id="a-typography-text-21"
                >【波化天然气】节前需求下降，国产LNG价格上涨受限
              </a-typography-text>
              <a-typography-text class="text-[#fff] line-clamp-3 py-1" id="a-typography-text-22"
                >据百川盈浮统计今日国内LNG市场均价为4502元/吨，较1月104472元/吨上调30元/吨，涨幅
              </a-typography-text>

              <a-flex justify="space-between" align="center" class="py-1" id="a-flex-14">
                <a-button class="text-[#5078C1] !text-[12px]" size="small" id="a-button-1">点击查看详情</a-button>
                <a-typography-paragraph class="flex flex-col !mb-0" id="a-typography-paragraph-5">
                  <a-typography-text class="text-[#fff]" id="a-typography-text-23">百川盈孚行业分析集</a-typography-text>
                  <a-typography-text class="text-[#fff]" id="a-typography-text-24"> 张琳英 </a-typography-text>
                </a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
        <a-typography-link class="flex items-center py-2" :id="`a-typography-link-13-${index}`" v-for="(item, index) in list5" :key="index">
          <a-typography-paragraph class="w-1 h-1 bg-[#ddd] !mb-0" :id="`a-typography-paragraph-6-${index}`"></a-typography-paragraph>
          <a-typography-text class="font-bold" :id="`a-typography-text-25-${index}`">{{ item.name }}</a-typography-text>
          <a-typography-text :id="`a-typography-text-26-${index}`">{{ item.title }}</a-typography-text>
        </a-typography-link>
      </a-col>
      <a-col :span="8" id="a-col-3">
        <a-typography-title :level="5" class="line-clamp-1 !mb-2" id="a-typography-title-3">战略合作单位</a-typography-title>

        <a-row v-for="(item, index) in list7" :key="index" class="border border-[#ddd] border-solid" :id="`a-row-2-${index}`">
          <a-col :span="6" class="bg-[#2B304D] p-2" :id="`a-col-4-${index}`">
            <a-typography-link class="h-full flex justify-center items-center" :id="`a-typography-link-14-${index}`">
              <a-typography-text class="text-[#fff] !w-[120px] line-clamp-2" :id="`a-typography-text-27-${index}`">{{
                item.name
              }}</a-typography-text>
            </a-typography-link>
          </a-col>
          <a-col :span="18" :id="`a-col-5-${index}`">
            <a-typography-link class="flex flex-col p-2" :id="`a-typography-link-15-${index}`">
              <a-typography-text :id="`a-typography-text-28-${index}`" class="line-clamp-2">{{ item.title }}</a-typography-text>
              <a-typography-paragraph v-if="item.tag" class="!mb-0" :id="`a-typography-paragraph-7-${index}`">
                <a-button type="link" v-for="(it, ind) in item.tag" :key="ind" class="h-auto !p-0 mr-1" :id="`a-button-2-${ind}`">{{
                  it
                }}</a-button>
              </a-typography-paragraph>
            </a-typography-link>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row :gutter="10" class="mt-5" id="a-row-3">
      <a-col :span="8" id="a-col-6">
        <a-flex vertical class="p-2 border border-[#ddd] border-solid" id="a-flex-15">
          <a-flex justify="space-between" align="center" class="!mb-2">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-4">行业快讯</a-typography-title>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-16">更多>></a-typography-link>
          </a-flex>
          <a-image width="100%" class="!h-[100px]" src="https://picsum.photos/id/2/1000/100" :preview="false" id="a-image-2" />
          <a-typography-link
            class="flex items-center py-1"
            v-for="(item, index) in list77"
            :key="index"
            :id="`a-typography-link-17-${index}`"
          >
            <a-typography-paragraph
              class="w-1 h-1 rounded-full bg-blue-500 !mb-0 mx-1"
              :id="`a-typography-paragraph-8-${index}`"
            ></a-typography-paragraph>
            <a-typography-text class="line-clamp-1" :id="`a-typography-text-29-${index}`">{{ item }}</a-typography-text>
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-7">
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-16">
          <a-flex justify="space-between" align="center" class="p-2 border-[0] border-b-[1px] border-solid border-[#ddd]" id="a-flex-17">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-5">行业快讯</a-typography-title>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-18">更多>></a-typography-link>
          </a-flex>
          <a-flex vertical class="p-2" id="a-flex-18">
            <a-typography-link
              class="flex items-center py-1"
              :id="`a-typography-link-19-${index}`"
              v-for="(item, index) in list777"
              :key="index"
            >
              <a-typography-paragraph
                class="w-1 h-1 rounded-full bg-blue-500 !mb-0 mx-1"
                :id="`a-typography-paragraph-9-${index}`"
              ></a-typography-paragraph>
              <a-typography-text class="line-clamp-2" :id="`a-typography-text-30-${index}`">{{ item }}</a-typography-text>
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-8">
        <a-flex vertical justify="space-between" class="border border-[#ddd] border-solid h-full" id="a-flex-18">
          <a-image width="100%" class="!h-[100px]" src="https://picsum.photos/id/3/1000/100" :preview="false" id="a-image-3" />
          <a-image width="100%" class="!h-[100px]" src="https://picsum.photos/id/4/1000/100" :preview="false" id="a-image-4" />
        </a-flex>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
const list = {
  one: ['热点商品', '沥青', '液碱', '钢材', '线螺', '涂踱'],
  two: ['行业服务', '数据库', '行业报告', '会议会展', '采购比价'],
  three: ['产品下载', '行业大叔一句智能分析系统', '百川盈浮APP'],
};
const list1 = [
  '汽车原料辅料产业链',
  '水处理原辅料产业钱',
  '医药原辅料产业链。',
  '光伏行业相关产业链',
  '轮胎产业链',
  '电池原辅料产业链',
  '钢铁原辅料产业链',
  '造纸原辅料产业链',
];
const list2 = [
  {
    style: 'bg-[#EBECF1]',
    name: '百川盈孚2025年(第十八届)',
    title: '煤化工行业年会',
    subTitle: '暨客户见面会',
    time: '2025年2月17-19号   杭州',
    color: '#b3cce2',
  },
  {
    style: 'bg-[#DFE9F1]',
    name: '百川盈孚2025年(第十二届)',
    title: '化肥产业链研讨会',
    subTitle: '暨客户见面会',
    time: '2025年2月17-19号 重庆',
    color: '#edb7b7',
  },
  {
    style: 'bg-[#FCDDDB]',
    name: '百川盈孚2025年(第十八届)',
    title: '石油焦市场研讨会',
    subTitle: '暨客户见面会',
    time: '2025年2月17-19号 杭州',
    color: '#FFF2EC',
  },
  {
    style: 'bg-[#BADFF2]',
    name: '百川盈孚2025年(第十届)',
    title: '锂市场交流会',
    subTitle: '',
    time: '2025年2月17-19号 长沙',
    color: '#7DC7EC',
  },
  {
    style: 'bg-[#FAE1C8]',
    name: '百川盈孚2025年(第三届)',
    title: '甲醛产业链市场形势',
    subTitle: '及技术研讨会',
    time: '2025年2月17-19号 济南',
    color: '#FCE3CF',
  },
  {
    style: 'bg-[#C8ECD5]',
    name: '百川盈孚2025年(第八届)',
    title: '甲醛及下游产业链市场',
    subTitle: '交流会暨绿色甲醛发展大会',
    time: '2025年2月17-19号 济南',
    color: '#CFF7EF',
  },
];
const list3 = [
  {
    name: '玉米',
    one: '2063',
    type: 'down',
    two: '-2.00',
  },
  {
    name: '碳酸锂',
    one: '2063',
    type: 'up',
    two: '1000.00',
  },
  {
    name: '螺纹钢',
    one: '2063',
    type: 'up',
    two: '5.00',
  },
  {
    name: '申解铜',
    one: '2063',
    type: 'up',
    two: '390.00',
  },
  {
    name: '聚乙烯',
    one: '2063',
    type: 'down',
    two: '-50.00',
  },
  {
    name: '豆油',
    one: '2063',
    type: 'down',
    two: '-150.00',
  },
  {
    name: '汽油',
    one: '2063',
    type: 'down',
    two: '-31.00',
  },
  {
    name: '电解铝',
    one: '2063',
    type: 'up',
    two: '-140.00',
  },
];
const list4 = [
  {
    name: '锌精矿(元/吨)',
    price: '20010',
    down1: '-280',
    down2: '-1.38%',
  },
  {
    name: '甲苯(元/吨)',
    price: '6672',
    down1: '-96',
    down2: '-1.42%',
  },
  {
    name: '白刚玉(元/吨)',
    price: '20010',
    down1: '-334',
    down2: '-1.43%',
  },
  {
    name: '锌锭(元/吨)',
    price: '20010',
    down1: '-350',
    down2: '-1.43%',
  },
  {
    name: '醚后碳四(元/吨)',
    price: '20010',
    down1: '-123',
    down2: '-1.46%',
  },
  {
    name: '生猪(元/吨)',
    price: '16.07',
    down1: '-0.25',
    down2: '-1.53%',
  },
];
const list5 = [
  {
    name: '【碳酸二甲酯】',
    title: '下游节前备货，价格高涨困难',
  },
  {
    name: '【铅】',
    title: '节动轮价的稳运行，关注下游体服交用',
  },
  {
    name: '【铟】',
    title: '铟市场石涨情绪增强，市场活跃度提升',
  },
  {
    name: '【原盐】',
    title: '下游年前囤货，工业盐行情偏暖运行',
  },
];
const list6 = [
  '百川盈学2025年(第十二届)化肥产业链研讨会暨客',
  '百川盈孚2025年锂市场交流会',
  '百川盈孚2025年(第十五届)稀土产业大会',
  '百川盈孚2025年(第九届)磷化工市场研讨会',
  '百川盈孚2025年(第五届)农药市场研讨会',
];
const list7 = [
  {
    name: '国家发改委价格检测中心',
    tag: ['甲醇', '沥青', '纯碱', '尿素', '碳酸锂', '电解钢', '电解铝', '金属硅'],
    title: '百川英孚大宗商品价格参考：',
  },
  {
    name: '中国产业发展促进会',
    title: '常数 保力有会万区公析 大常数 保力有会万区公析 大常数 保力有会万区公析 大常数',
  },
  {
    name: '万得信息技术股份优先公司',
    title: '同后加经中以交信的的家统。同后加经中以交信的的家统。同后加经中以交信的的家统。',
  },
  {
    name: '上海化工宝数字科技有限公司',
    title: '资源头安、如品合作等自作关系，包种资源头安、如品合作等自作关系，包种',
  },
  {
    name: '上海钢之家信息科技有限公司',
    title: '信美经经川海学行人交局自能信美经经川海学行人交局自能信美经经川海学行人交局自能',
  },
];
const list77 = [
  '1月17日讯，国内期货早盘收盘，主力合约涨跌不一。纯碱、玻璃涨超3%，尿素、氧化铝、沪锌、焦煤涨超',
  '1月17日讯，国内期货早盘收盘，主力合约涨跌不一。纯碱、玻璃涨超3%，尿素、氧化铝、沪锌、焦煤涨超',
];
const list777 = [
  '百川盈学2025年(第十二届)化肥产业链研讨会暨客',
  '百川盈孚2025年锂市场交流会',
  '百川盈孚2025年(第十五届)稀土产业大会',
  '百川盈孚2025年(第九届)磷化工市场研讨会',
  '百川盈孚2025年(第五届)农药市场研讨会',
];
</script>
<style></style>
